﻿@{
    ViewBag.Title = "加工订单管理";
}

@section header{
    <style>
        .fast-filter .tablink {
            padding-right: 8px;
            padding-left: 2px;
        }
    </style>
}
@section quickmenu{
    <td style="padding-right: 0px; padding-left: 10px;">
        <span style="cursor: pointer;" title="新建..." @@click="listAdd">
            <i class="icon-plus icon-2x pull-left icon-border crm-bu-style"></i>
        </span>
    </td>
    <td style="padding-right: 0px; padding-left: 10px;">
        <span style="cursor: pointer;" title="查找..." @@click="searchToggle">
            <i class="icon-search icon-2x pull-left icon-border crm-bu-style"></i>
        </span>
    </td>
    <td style="padding-right: 0px; padding-left: 10px;">
        <span style="cursor: pointer;" title="导出..." onclick="exportAll();"><i class="icon-upload icon-2x pull-left icon-border crm-bu-style"></i></span>
    </td>
}

@*页面视图列表开始*@
<table class="list_table table100 fast-filter">
    <tbody>
        <tr>
            <td style="">
                <i class="icon-filter pure-icon-bu"></i>
                <span>
                    时间：<a class="cus_markbai tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="reset" data-fstart="date_s" data-fend="date_e">不限</a>
                    <a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="date" data-fstart="date_s" data-fend="date_e" data-fvalue="nowd">当天</a>
                    <a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="date" data-fstart="date_s" data-fend="date_e" data-fvalue="noww">本周</a>
                    <a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="date" data-fstart="date_s" data-fend="date_e" data-fvalue="nowm">本月</a>
                    <a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="date" data-fstart="date_s" data-fend="date_e" data-fvalue="nowy">本年</a>
                    <a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="date" data-fstart="date_s" data-fend="date_e" data-fvalue="lastw">上周</a>
                    <a class="cus_markhui tablink" href="javascript:void(0);" @@click="listFastFilter($event)" data-ftype="date" data-fstart="date_s" data-fend="date_e" data-fvalue="lastm">上月</a>
                </span>
            </td>
        </tr>
    </tbody>
</table>
@*页面视图列表结束*@

<div id="searchDiv" style="z-index: 1; display: block; position: relative; margin-top: 3px;" v-show="searchShow">
    <table cellpadding="5" cellspacing="2" class="searchUIBasic padding2" align="center" border="0" style="width:90%;">
        <tbody>
            <tr>
				<td class="small" nowrap="" align="center">
					<span>订单号</span>
					<input type="text" class="txtBox" style="width: 150px" v-model.trim="listConditions.sno">
                    <span>布行名</span>
					<input type="text" class="txtBox" style="width: 180px" v-model.trim="listConditions.partnername">
					<span>送货人</span>
					<input type="text" class="txtBox" style="width: 180px" v-model.trim="listConditions.deliveryman">
                    <span>送货日期</span>
                    <input name="date_s" type="text" class="calendar" id="date_s" style="width: 70px;cursor:pointer;" readonly maxlength="19" v-model.trim="listConditions.date_s" />
                    <i class="icon-calendar calendar-tgr" id="date_s_tgr"></i>&nbsp;-&nbsp;
                    <input name="date_e" type="text" class="calendar" id="date_e" style="width: 70px;cursor:pointer;" readonly maxlength="19" v-model.trim="listConditions.date_e" />
                    <i class="icon-calendar calendar-tgr" id="date_e_tgr"></i>
                    &nbsp;
                    <button class="pure-button pure-button-edit" title="查找" @@click.prevent="listRefresh(1)">
                        <i class="icon-search"></i>查找
                    </button>
                    &nbsp;
                    <button class="pure-button pure-button-cancel" title="取消" @@click.prevent="searchReset">
                        <i class="icon-rotate-left"></i>重置
                    </button>
                    &nbsp;&nbsp;
                </td>
                <td class="small" valign="top">
                    <input class="windLayerBtclose" type="button" title="" @@click="searchToggle">
                </td>
            </tr>
        </tbody>
    </table>
</div>
<table class="small table100" style="">
    <tr>
        <td align="left" nowrap>
            <button class="pure-button pure-button-edit" @@click.prevent="listAdd">
                <i class="icon-plus"></i>&nbsp;新增
            </button>
            &nbsp;
            <button class="pure-button pure-button-danger" @@click.prevent="listBatchDelete">
                <i class="icon-trash"></i>&nbsp;批量删除
            </button>
            &nbsp;
            <button class="pure-button pure-button-share" onclick="togglePanelR(this,'divExport');return false;"
                    onmouseout="hidePanel('divExport')">
                <i class="icon-upload"></i>&nbsp;导出
            </button>
            &nbsp;
            <div id="divExport" class="list-bulk-div" onmouseout="hidePanel('divExport')" onmouseover="showPanel('divExport')">
                <div onclick="exportAll();">
                    <i class="icon-upload" style="padding: 0px 10px;"></i>导出全部
                </div>
                <div class="list-bulk-link" onclick="exportCurrent();">
                    <i class="icon-cloud-upload" style="padding: 0px 10px;"></i>导出当前页
                </div>
                <div onclick="exportSelected();">
                    <i class="icon-upload" style="padding: 0px 10px;"></i>导出选中
                </div>
            </div>
        </td>
        <td nowrap align="right" valign="middle">
            <table border="0" cellspacing="0" cellpadding="0" class="small">
                <tbody>
                    <tr>
                        <td style="padding-right: 5px">
                            <vue-pagination :total="listData.total" :psize="listData.psize" :pnum="listData.pnum" @@change="pageChangeHandler"></vue-pagination>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>
<div style="width:100%;overflow:auto;">
    <table class="crm-table table100 padding2" cellspacing="1" cellpadding="3" style="table-layout:fixed;">
        <caption v-show="listData.list.length==0">
            暂无数据
        </caption>
        <tr class="windLayerHead">
            <td style="width: 30px;">
                <input type="checkbox" name="selectall" @@click="listToggle($event)" v-model="listData.checked" />
            </td>
            <td v-for="(col,idx) in userColumns" :style="col.hdStyles">
                <a class='listFormHeaderLinks' @@click="listSort(col.name)" v-if="col.sort">{{col.title}}<i :class="{'icon-caret-up':listSortColumn.order=='asc','icon-caret-down':listSortColumn.order=='desc'}" v-if="col.name==listSortColumn.name"></i></a>
                <span v-else>{{col.title}}</span>
            </td>
            <td nowrap style="width:100px;text-align:center;">
                操作
			</td>
			<td nowrap>
			</td>
        </tr>
        <tr v-for="(item,idx) in pageList" :rid="item.ID" :class="{'crm-table-plural':idx%2==1}" style="cursor: pointer;">
            <td>
                <input type="checkbox" name="rowid" :value='item.ID' :data-idx="idx" @@click="listCheck($event)" :checked="item.CheckedState" />
            </td>
            <td v-for="(col,cidx) in userColumns" :style="item.Styles[cidx]">
                <a :href="item.Links[cidx].href" v-if="item.Links[cidx].href">{{item[col.name]}}</a>
                <span v-else>{{item[col.name]}}</span>
            </td>
			<td nowrap style="text-align:center;">
                <i class="icon-edit pure-icon-bu crm-bu-style list-action-btn" title='修改' style="" @@click="listEdit(item)"></i>
                <i class="icon-trash pure-icon-bu crm-bu-style list-action-btn" title='删除' style="" @@click="listDelete(item)"></i>
			</td>
			<td nowrap>
			</td>
		</tr>
		<tr class="windLayerHead">
			<td style="text-align:right;" colspan="6">总合计</td>
			<td style="text-align:right;">{{listData.listsumtotal.length>0?listData.listsumtotal[0]:0}}</td>
			<td style="text-align:right;">{{listData.listsumtotal.length>1?listData.listsumtotal[1]:0}}</td>
			<td></td>
			<td style="text-align:right;">{{listData.listsumtotal.length>2?listData.listsumtotal[2]:0}}</td>
			<td style="text-align:right;">{{listData.listsumtotal.length>3?listData.listsumtotal[3]:0}}</td>
			<td style="" colspan="4"></td>
		</tr>
    </table>
</div>
@*生成列表操作*@
@section footer{
    @*日期必须开始*@
    <script src="~/lib/laydate/laydate.js" asp-append-version="true"></script>
    <script src="~/lib/moment/moment.min.js" asp-append-version="true"></script>
    @*日期必须结束*@
    @*列表相关开始*@
    <script type="text/javascript">
		var listConditionsInit = { state: "", deliverstate:"",recvstate:"" };//初始查询条件
		var pageEnumData = {
			state:@(Json.Serialize(ViewBag.StockOutOrderStateOptions)),
			recvstate:@(Json.Serialize(ViewBag.RecvStateOptions)),
			deliverstate:@(Json.Serialize(ViewBag.StockOutOrderDeliverStateOptions))
		};
		var pageData = {
			hideBreadcrumb: false,
			serviceCode: '@(ViewBag.ServiceCode)',
			global: globalData,
			listData: {
				checked:false,
				list: [],
				total: 0,
				pnum: 1,
				psize:20,
				sumcol: [],
				listsumtotal: [],
				pagesumtotal: []
			},
			userColumns: [
				{
					title: "订单号",
					name: "SNo",
					sort: true,
					href:"@(Url.Action("ViewDetail", "Machining"))/{ID}",
					hdStyles: {
						width: "125px",
						textAlign: 'center'
					},
					bdStyles: {
						textAlign: 'center'
					}
				},
				{
					title: "布行名",
					name: "PartnerName",
					hdStyles: {
						width: "265px",
						textAlign: 'center'
					},
					bdStyles: {
					}
				},
				{
					title: "送货人",
					name: "DeliveryMan",
					hdStyles: {
						width: "100px",
						textAlign: 'center'
					},
					bdStyles: {
						textAlign: 'center'
					}
				},
				{
					title: "送货日期",
					name: "DeliveryDate",
					hdStyles: {
						width: "120px",
						textAlign: 'center'
					},
					bdStyles: {
						textAlign: 'center'
					}
				},
				{
					title: "加工类型",
					name: "MachiningTypeText",
					hdStyles: {
						width: "100px",
						textAlign: 'center'
					},
					bdStyles: {
						textAlign: 'center'
					}
				},
				{
					title: "卷数",
					name: "Rolls",
					hdStyles: {
						width: "100px",
						textAlign: 'center'
					},
					bdStyles: {
						textAlign: 'right'
					}
				},
				{
					title: "米数",
					name: "Meters",
					hdStyles: {
						width: "100px",
						textAlign: 'center'
					},
					bdStyles: {
						textAlign: 'right'
					}
				},
				{
					title: "单价",
					name: "Price",
					hdStyles: {
						width: "100px",
						textAlign: 'center'
					},
					bdStyles: {
						textAlign: 'right'
					}
				},
				{
					title: "总价",
					name: "Total",
					hdStyles: {
						width: "100px",
						textAlign: 'center'
					},
					bdStyles: {
						textAlign: 'right'
					}
				},
				{
					title: "付款金额",
					name: "PreRecvTotal",
					hdStyles: {
						width: "100px",
						textAlign: 'center'
					},
					bdStyles: {
						textAlign: 'right'
					}
				},
				{
					title: "创建时间",
					name: "AddDate",
					hdStyles: {
						width: "120px",
						textAlign: 'center'
					},
					bdStyles: {
						textAlign: 'center'
					}
				},
				{
					title: "创建人",
					name: "AddManName",
					hdStyles: {
						width: "100px",
						textAlign: 'center'
					},
					bdStyles: {
						textAlign: 'center'
					}
				}
			],
			searchShow:true,
			listConditions: Object.assign({}, listConditionsInit),
			listSortColumn: {
				name: "",
				order:""
			},
			listStyles: {
			},
			model: {},
		};

		var pageApp = new Vue({
			el: '#app',
			data: pageData,
			mounted: function () {
				this.listConditions = Object.assign({}, this.listConditions, utils.pageRestore());
				this.listRefresh();
			},
			methods: {
				pageChangeHandler: function (args) {
					this.listRefresh(args.pnum, args.psize)
				},
				listFastFilter: function (e) {
					var obj = e.srcElement || e.target;
					$(obj).parent('span').find('.tablink').removeClass('cus_markbai').addClass('cus_markhui');
					$(obj).addClass('cus_markbai');
					switch (obj.dataset.ftype) {
						case "date":
							{
								if (!obj.dataset.fstart || !obj.dataset.fend) {
									return;
								}
								var dts = '';
								var dte = '';
								switch (obj.dataset.fvalue) {
									case "nowd":
										dts = moment().startOf('day').format('YYYY-MM-DD');
										dte = moment().format('YYYY-MM-DD');
										break;
									case "noww":
										dts = moment().startOf('isoWeek').format('YYYY-MM-DD');
										dte = moment().format('YYYY-MM-DD');
										break;
									case "nowm":
										dts = moment().startOf('month').format('YYYY-MM-DD');
										dte = moment().format('YYYY-MM-DD');
										break;
									case "nowy":
										dts = moment().startOf('year').format('YYYY-MM-DD');
										dte = moment().format('YYYY-MM-DD');
										break;
									case "lastw":
										dts = moment().week(moment().week() - 1).startOf('isoWeek').format('YYYY-MM-DD');
										dte = moment().week(moment().week() - 1).endOf('isoWeek').format('YYYY-MM-DD');
										break;
									case "lastm":
										dts = moment().month(moment().month() - 1).startOf('month').format('YYYY-MM-DD');
										dte = moment().month(moment().month() - 1).endOf('month').format('YYYY-MM-DD');
										break;
								}
								var dates = {};
								dates[obj.dataset.fstart] = dts;
								dates[obj.dataset.fend] = dte;
								this.listConditions = Object.assign({}, this.listConditions, dates);
								this.listRefresh(1);
							}
							break;
						case "reset":
							{
								var values = {};
								if (obj.dataset.fname) {
									values[obj.dataset.fname] = obj.dataset.fvalue;
									this.listConditions = Object.assign({}, this.listConditions, values);
								} else if (obj.dataset.fstart && obj.dataset.fend) {
									values[obj.dataset.fstart] = '';
									values[obj.dataset.fend] = '';
									this.listConditions = Object.assign({}, this.listConditions, values);
								}
								this.listRefresh(1);
							}
							break;
						default:
							{
								if (!obj.dataset.fname) {
									return;
								}
								var values = {};
								values[obj.dataset.fname] = obj.dataset.fvalue;
								this.listConditions = Object.assign({}, this.listConditions, values);
								this.listRefresh(1);
							}
					}
				},
				listRefresh: function (pageNum, pageSize) {
					var _params = Object.assign({}, {
						pnum: pageNum || this.listData.pnum,
						psize: pageSize || this.listData.psize,
						sortorder: !this.listSortColumn.name ? "" : this.listSortColumn.name + "_" + this.listSortColumn.order
					}, this.listConditions);
					utils.pageStore(_params,pageNum,pageSize);
					var _this = this;
					utils.ajaxPost('@(Url.Action("Search", "Machining"))', _params, function (resp) {
						var list = resp.data.list.map(function (item) {
							return Object.assign({}, item, {
								CheckedState: false,
							});
						});
						var sumcol = resp.data.sumcol || [];
						var sumtotal = resp.data.sumtotal || [];
						var pagesumtotal = sumcol.map(function (col) {
							return resp.data.list.reduce(function (total, cur) {
								return total + cur[col];
							}, 0);
						});
						var newData = { sumcol: sumcol, listsumtotal: sumtotal, pagesumtotal: pagesumtotal, list: list, total: resp.data.total, pnum: resp.data.pnum, psize: resp.data.psize, checked: false };
						_this.listData = newData;
					}, function (err) {
					});
				},
				searchReset: function () {
					$('.fast-filter').find('.tablink[data-ftype="reset"]').each(function (idx, elem) {
						$(elem).parent('span').find('.tablink').removeClass('cus_markbai').addClass('cus_markhui');
						$(elem).removeClass('cus_markhui').addClass('cus_markbai');
					});
					this.listConditions = Object.assign({}, listConditionsInit);
					this.listSortColumn = {
						col: "",
						order: ""
					};
					this.listRefresh(1);
				},
				searchToggle: function () {
					this.searchShow = !this.searchShow;
				},
				listSort: function (col) {
					if (col != this.listSortColumn.name) {
						this.listSortColumn.order = "desc";
						this.listSortColumn.name = col;
					} else {
						this.listSortColumn.order = this.listSortColumn.order == "asc" ? "desc" : "asc";
					}
					this.listRefresh(1);
				},
				listToggle: function (e) {
					var checked = (e.srcElement || e.target).checked;
					this.listData.list=this.listData.list.map(function (item) {
						return Object.assign({}, item,{
							CheckedState: checked
						});
					});
				},
				listCheck: function (e) {
					var obj = e.srcElement || e.target;
					var checked = obj.checked;
					this.listData.list[obj.dataset.idx].CheckedState = checked;
				},
				listAdd: function () {
					location.href = '@(Url.Action("Add", "Machining"))?nc=' + new Date().getTime();
				},
				listEdit: function (item) {
					location.href = '@(Url.Action("Edit", "Machining"))/' + item.ID + '?nc=' + new Date().getTime();
				},
				listDelete: function (item) {
					var _this = this;
					utils.confirm('确定要删除销售订单【' + item.SNo +'】？', function () {
						utils.ajaxPost('@(Url.Action("Delete","Machining"))', { id: item.ID }, function (resp) {
							utils.success("删除成功");
							_this.listRefresh();
						}, function (msg) {
							utils.alert(msg);
						});
					});
				},
				listBatchDelete: function () {
					var selected = this.listData.list.filter(function (item) {
						return item.CheckedState;
					});
					var ids = selected.map(function (item) {
						return item.ID;
					});
					if (!ids||ids.length == 0) {
						utils.alert('请先选择要删除的销售订单');
						return;
					}
					var _this = this;
					utils.confirm('确定要删除所选择的销售订单？', function () {
						utils.ajaxPost('@(Url.Action("BatchDelete", "Machining"))',  ids , function (resp) {
							utils.success("删除成功");
							_this.listRefresh();
						}, function (msg) {
							utils.alert(msg);
						});
					});
				}
			},
			computed: {
				pageList: function () {
					var _this = this;
					return this.listData.list.map(function (item) {
						return Object.assign({}, item, {
							StateNow: _this.$options.filters.formatState(item.StateNow),
							RecvState: _this.$options.filters.formatRecvState(item.RecvState),
							DeliverState: _this.$options.filters.formatDeliverState(item.DeliverState),
							Styles: _this.userColumns.map(function (col) {
								return Object.assign({}, col.bdStyles, _this.listStyles[col.name] ? _this.listStyles[col.name][item[col.name]] : {})
							}),
							Links: _this.userColumns.map(function (col) {
								return Object.assign({}, { href: col.href ? col.href.replace(/{ID}/g, item.ID) : "" });
							}),
						});
					});
				},
				currentM: function () {
					var currentM = null;
					var i;
					var j;
					for (i = 0; i < this.global.modules.length; i++) {
						for (j = 0; j < this.global.modules[i].Services.length; j++) {
							if (this.serviceCode == this.global.modules[i].Services[j].Code) {
								currentM = this.global.modules[i];
								break;
							}
						}
					}
					return currentM;
				},
				currentS: function () {
					var currentS = null;
					var i;
					var j;
					for (i = 0; i < this.global.modules.length; i++) {
						for (j = 0; j < this.global.modules[i].Services.length; j++) {
							if (this.serviceCode == this.global.modules[i].Services[j].Code) {
								currentS = this.global.modules[i].Services[j];
								break;
							}
						}
					}
					return currentS;
				}
			},
			filters: {
				formatState: function (val) {
					return utils.formatEnum(val, pageEnumData.state);
				},
				formatRecvState: function (val) {
					return utils.formatEnum(val, pageEnumData.recvstate);
				},
				formatDeliverState: function (val) {
					return utils.formatEnum(val, pageEnumData.deliverstate);
				}
			}
		});

		$(document).ready(function () {
			$('.calendar-tgr').each(function (eidx, elem) {
				var $this = $(elem);
				var input = $this.prev('input')[0];
				$this.click(function () {
					laydate.render({
						elem: input
						, show: true //直接显示
						, closeStop: $this[0]
						, done: function (value, date) {
							pageData.listConditions = Object.assign({}, pageData.listConditions, _defineProperty({}, input.name, value));
						}
					});
				});
			});

			$('.calendar').each(function (eidx, elem) {
				var $this = $(elem);
				var input = $this[0];
				laydate.render({
					elem: input
					, closeStop: $this.next('i')[0]
					, done: function (value, date) {
						pageData.listConditions = Object.assign({}, pageData.listConditions, _defineProperty({}, input.name, value));
					}
				});
			});
		});

		$(function () {
			if(isMobile())
			{
				window.location.href="@Url.Action("MobileList", "Machining")";
			}
		});

		function isMobile() {
		  const regExp = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
		  return regExp.test(navigator.userAgent);
		}
    </script>
    @*列表相关结束*@
    @*导出相关开始*@
    <script type="text/javascript">
		function exportAll() {
		}

		function exportCurrent() {
		}

		function exportSelected() {
		}
    </script>
    @*导出相关结束*@
}
